import React from 'react';
import { View, Image, Text, StyleSheet, NativeModules, NativeEventEmitter } from 'react-native';

export default class Study extends React.Component {

    render() {
        let pic = {
			uri: 'http://c.hiphotos.baidu.com/zhidao/pic/item/d009b3de9c82d1587e249850820a19d8bd3e42a9.jpg'
		};
		return (
            <View style={styles.container}>
                <Image source={pic} resizeMode = 'cover' style={styles.roleIcon}/>
                <View style={styles.viewForRoleName}>
                    <Text style={styles.roleName}>萧无声</Text>
                </View>
                <View style={styles.viewForSchoolAndLevel}>
                    <Text style={styles.school}>耀华城</Text>
                    <Text style={styles.level}>LV73</Text>
                </View>
                <View style={styles.viewForGameAndServer}>
                    <View style={styles.viewForGame}>
                        <Text style={styles.game}>游戏：</Text>
                        <Text style={styles.gameContent}>神武4手游</Text>
                    </View>
                    <View style={styles.viewForServer}>
                        <Text style={styles.server}>服务器：</Text>
                        <Text style={styles.serverContent}>雪舞飞扬</Text>
                    </View>
                </View>
                <View style={styles.viewForClubAndRolId}>
                    <View style={styles.viewForClub}>
                        <Text style={styles.club}>帮派：</Text>
                        <Text style={styles.clubContent}>青青草原</Text>
                    </View>
                    <View style={styles.viewForRoleId}>
                        <Text style={styles.roleId}>角色ID：</Text>
                        <Text style={styles.roleIdContent}>69723225</Text>
                    </View>
                </View>
            </View>
 		);
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1, 
        alignItems: 'center',
    },
    roleIcon:{
        marginTop:20,
        width: 120, 
        height: 160,
        borderRadius: 3,
        backgroundColor:'#eeeeee'
    },
    roleName:{
        marginTop:20,
        fontSize:20,
        color:'red',
    },
    viewForSchoolAndLevel:{
        height:20,
        width:200,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
        marginTop:20,
    },
    school:{
        fontSize:14,
        right:10,
    },
    level:{
        fontSize:14,
        color:'orange',
        left:10,
    },
    viewForGameAndServer:{
        height:20,
        width:280,
        alignItems:'center',
        justifyContent:'space-between',
        flexDirection:'row',
        marginTop:35,
    },
    viewForGame:{
        height:20,
        width:140,
        alignItems:'center',
        flexDirection:'row',
    },
    game:{
        fontSize:14,
        color:'gray',
    },
    gameContent:{
        fontSize:14,
    },
    viewForServer:{
        height:20,
        width:120,
        alignItems:'center',
        flexDirection:'row',
    },
    server:{
        fontSize:14,
		color:'gray',
    },
    serverContent:{
        fontSize:14,
    },
    viewForClubAndRolId:{
        height:20,
        width:280,
        alignItems:'center',
        justifyContent:'space-between',
        flexDirection:'row',
        marginTop:20,
    },
    viewForClub:{
        height:20,
        width:140,
        alignItems:'center',
        flexDirection:'row',
    },
    club:{
        fontSize:14,
        color:'gray',
    },
    clubContent:{
        fontSize:14,
    },
    viewForRoleId:{
        height:20,
        width:120,
        alignItems:'center',
        flexDirection:'row',
    },
    roleId:{
        fontSize:14,
        color:'gray',
    },
    roleIdContent:{
        fontSize:14,
    }
})